<!-- 分仓库查询 -->
<template>
  <!-- 顶部按钮 -->
  <div class="crud buttons">
    <el-button type="primary" @click="exportFile"
      ><el-icon> <FolderOpened /> </el-icon>导出Elcel</el-button
    >
    <el-button type="primary" @click="handleprint"
      ><el-icon> <Printer /> </el-icon>打印</el-button
    >
  </div>
  <div class="project">
    <div class="top_box">
      <!-- 搜索框 -->
      <div class="search_box">
        <span class="searc_title">材料编码</span>
        <el-input v-model="input1" class="w_150" clearable />
        <span class="searc_title">材料名称</span>
        <el-input v-model="input2" class="w_150" clearable />
        <span class="searc_title">材料类别</span>
        <el-input v-model="input3" class="w_150" clearable />
        <el-button
          type="primary"
          @click="handlinquire"
          @keydown.enter="keydown()"
          >查询</el-button
        >
      </div>
    </div>

    <!-- 表格渲染 -->
    <div class="main">
      <el-table ref="multipleTableRef" :data="userList" style="width: 100%">
        <el-table-column type="selection" ref="checked" align="center" />
        <el-table-column
          property="materialNumber"
          label="材料编码"
          align="center"
        />
        <el-table-column property="storeName" label="仓库名称" align="center" />
        <el-table-column
          property="materialName"
          label="材料名称"
          align="center"
        />
        <el-table-column
          property="materialClass"
          label="材料种类"
          align="center"
        />
        <el-table-column
          property="materialSpelling"
          label="材料简拼码"
          align="center"
        />
        <el-table-column
          property="materialSpecificationModel"
          label="材料规格型号"
          align="center"
        />

        <el-table-column
          property="materialPrice"
          label="材料售价"
          align="center"
        />
        <el-table-column
          property="materialCost"
          label="材料进货价"
          align="center"
        />
        <el-table-column
          property="materialUnit"
          label="材料单位"
          align="center"
        />
        <el-table-column
          property="materialInventory"
          label="库存数量"
          align="center"
        />
        <el-table-column
          property="cumulativeStorage"
          label="累计入库"
          align="center"
        />
        <el-table-column
          property="quantityBorrowed"
          label="借用数量"
          align="center"
        />
        <el-table-column property="quantity" label="归还数量" align="center" />
        <el-table-column
          property="unreturned"
          label="未归还数量"
          align="center"
        />
        <el-table-column
          property="outboundQuantity"
          label="出库数量"
          align="center"
        />
        <el-table-column
          property="scrapQuantity"
          label="报废数量"
          align="center"
        />

        <el-table-column
          property="supplierName"
          label="供应商"
          align="center"
        />
        <el-table-column property="remarks" label="备注" align="center" />

        <!-- 左侧操作按钮 -->
        <el-table-column fixed="left" label="操作" align="center">
          <template #default="scope">
            <el-button size="small" type="primary" @click="oncheck(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

  <!-- 查看弹出框 -->
  <el-dialog
    v-model="dialogTableVisible"
    align-center
    title="详细信息"
    width="90%"
  >
    <el-table :data="form">
      <el-table-column
        property="materialNumber"
        label="材料编码"
        align="center"
      />
      <el-table-column
        property="materialName"
        label="材料名称"
        align="center"
      />
      <el-table-column
        property="materialClass"
        label="材料种类"
        align="center"
      />
      <el-table-column
        property="materialSpecificationModel"
        label="材料简拼码"
        align="center"
      />
      <el-table-column
        property="materialPrice"
        label="材料售价"
        align="center"
      />
      <el-table-column
        property="materialCost"
        label="材料进货价"
        align="center"
      />
      <el-table-column
        property="materialUnit"
        label="材料单位"
        align="center"
      />
      <el-table-column
        property="materialInventory"
        label="材料库存"
        align="center"
      />
      <el-table-column
        property="supplierName"
        label="供应商名称"
        align="center"
      />
      <el-table-column property="remarks" label="备注" align="center" />
    </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
// 外部引入
import { getMaterialInfo } from '@/api/getapi'
import { ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { utils, writeFileXLSX } from 'xlsx'

// 搜索框 点击搜索
const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const handlinquire = () => {
  let obj: any = {
    materialNumber: input1.value,
    materialName: input2.value,
    materialClass: input3.value,
  }
  // console.log(obj)
  // 排除空
  for (let key in obj) {
    if (obj[key] === '' || obj[key] === null) {
      delete obj[key]
    }
  }
  /*condition--搜索条件（obj）   data--被筛选的数据--arr  */
  let filter = (condition: any, data: any) => {
    return data.filter((item: any) => {
      return Object.keys(condition).every((key) => {
        return String(item[key]).includes(String(condition[key]).trim())
      })
    })
  }
  userList.value = filter(obj, allData.value)

  if (userList.value.length === 0) {
    ElMessage({
      type: 'error',
      message: '没有相关信息',
    })
  }
}
// 回车搜索

const keyDown: any = (e: { keyCode: number }) => {
  if (e.keyCode == 13 || e.keyCode == 108) {
    handlinquire()
  }
}

onMounted(() => {
  //绑定监听事件
  window.addEventListener('keydown', keyDown)
})

onUnmounted(() => {
  //销毁事件
  window.removeEventListener('keydown', keyDown, false)
})

// 表格引用
const multipleTableRef = ref<any>()
// 查看弹出框的状态
const dialogTableVisible = ref(false)

// 搜索框筛选渲染数据
const allData = ref<any>()
// 列表渲染响应式数据
const userList: any = ref([])
// 数据 key:value
const form = ref<any>({
  projectName: '',
  userName: '',
  jobNumber: '',
  sex: '',
  age: '',
  nameID: '',
  job: '',
  phone: '',
  department: '',
  departmentLeader: '',
  accStatus: '',
  postscript: '',
})

// 获取列表数据
const getInfo = async () => {
  const result = await getMaterialInfo()
  console.log(result)
  userList.value = result
  allData.value = result
}
getInfo()

// 导出
function exportFile() {
  const data = multipleTableRef.value.getSelectionRows()
  // console.log('选中数据:', data)

  const ws = utils.json_to_sheet(data)
  const wb = utils.book_new()
  utils.book_append_sheet(wb, ws, '项目信息')
  writeFileXLSX(wb, '材料信息.xlsx')
}

// 打印按钮
const handleprint = () => {
  console.log('打印')
}

// 查看按钮
const oncheck = (prod: any) => {
  // type.value = ''
  dialogTableVisible.value = true
  const arr = []
  arr.push(prod)
  form.value = arr
}
</script>

<style lang="scss" scoped>
.search_box {
  .searc_title {
    font-size: 16px;
    margin-left: 20px;
  }

  .w_150 {
    width: 150px;
    margin: 20px;
  }
}

.top_box {
  float: left;
  width: 100%;

  .project {
    float: left;
    width: 100%;
  }
}
.crud {
  margin: 10px;
  float: right;
}
.main {
  margin: auto;
  width: 98%;
}
</style>
